﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>制作网页版时钟</title>
</head>
<body>
    <canvas id="canvas" width="200" height="200" style="border:1px solid #000;">您的浏览器不支持Canvas。</canvas>
    <script type="text/javascript" language="javascript" charset="utf-8">
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        if (ctx) {
            let timerId;
            let frameRate = 60;
            function canvObject() {
                this.x = 0;
                this.y = 0;
                this.rotation = 0;
                this.borderWidth = 2;
                this.borderColor = '#000000';
                this.fill = false;
                this.fillColor = '#ff0000';
                this.update = function () {
                    if (!this.ctx) throw new Error('你没有指定ctx对象。');
                    let ctx = this.ctx
                    ctx.save();
                    ctx.lineWidth = this.borderWidth;
                    ctx.strokeStyle = this.borderColor;
                    ctx.fillStyle = this.fillColor;
                    ctx.translate(this.x, this.y);
                    if (this.rotation) ctx.rotate(this.rotation * Math.PI / 180);
                    if (this.draw) this.draw(ctx);
                    if (this.fill) ctx.fill();
                    ctx.stroke();
                    ctx.restore();
                }
            };
            function Line() { };
            Line.prototype = new canvObject();
            Line.prototype.fill = false;
            Line.prototype.start = [0, 0];
            Line.prototype.end = [5, 5];
            Line.prototype.draw = function (ctx) {
                ctx.beginPath();
                ctx.moveTo.apply(ctx, this.start);
                ctx.lineTo.apply(ctx, this.end);
                ctx.closePath();
            };

            function Circle() { };
            Circle.prototype = new canvObject();
            Circle.prototype.draw = function (ctx) {
                ctx.beginPath();
                ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
                ctx.closePath();
            };

            let circle = new Circle();
            circle.ctx = ctx;
            circle.x = 100;
            circle.y = 100;
            circle.radius = 90;
            circle.fill = true;
            circle.borderWidth = 6;
            circle.fillColor = '#ffffff';

            let hour = new Line();
            hour.ctx = ctx;
            hour.x = 100;
            hour.y = 100;
            hour.borderColor = "#000000";
            hour.borderWidth = 10;
            hour.rotation = 0;
            hour.start = [0, 20];
            hour.end = [0, -50];

            let minute = new Line();
            minute.ctx = ctx;
            minute.x = 100;
            minute.y = 100;
            minute.borderColor = "#333333";
            minute.borderWidth = 7;
            minute.rotation = 0;
            minute.start = [0, 20];
            minute.end = [0, -70];

            let seconds = new Line();
            seconds.ctx = ctx;
            seconds.x = 100;
            seconds.y = 100;
            seconds.borderColor = "#ff0000";
            seconds.borderWidth = 4;
            seconds.rotation = 0;
            seconds.start = [0, 20];
            seconds.end = [0, -80];

            let center = new Circle();
            center.ctx = ctx;
            center.x = 100;
            center.y = 100;
            center.radius = 5;
            center.fill = true;
            center.borderColor = 'green';

            for (let i = 0, ls = [], cache; i < 12; i++) {
                cache = ls[i] = new Line();
                cache.ctx = ctx;
                cache.x = 100;
                cache.y = 100;
                cache.borderColor = "green";
                cache.borderWidth = 2;
                cache.rotation = i * 30;
                cache.start = [0, -70];
                cache.end = [0, -80];
            }

            timerId = setInterval(function () {
                // 清除画布
                ctx.clearRect(0, 0, 200, 200);
                // 填充背景色
                ctx.fillStyle = 'green';
                ctx.fillRect(0, 0, 200, 200);
                // 表盘
                circle.update();
                // 刻度
                for (let i = 0; cache = ls[i++];)cache.update();
                // 时针
                hour.rotation = (new Date()).getHours() * 30;
                hour.update();
                // 分针
                minute.rotation = (new Date()).getMinutes() * 6;
                minute.update();
                // 秒针
                seconds.rotation = (new Date()).getSeconds() * 6;
                seconds.update();
                // 中心圆
                center.update();
            }, (1000 / frameRate) | 0);
        } else {
            alert('您的浏览器不支持Canvas无法预览时钟！');
        }
    </script>

</body>
</html>
